<template>
  <div class="layout-container">
    <header class="header-wrap">
      <GlobalHeader />
    </header>

    <main :class="['layout-main', { 'layout-main-full': isSolve }]">
      <router-view />
    </main>

  </div>
</template>

<script setup lang="ts">
import GlobalHeader from '../../src/components/GlobalHeader.vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 只有在特定路由时，main 区域才切换到全屏/无 padding 模式
const isSolve = computed(() => {
  return (
      route.name === 'QuestionSolve' ||
      (typeof route.path === 'string' && route.path.startsWith('/questions/'))
  )
})
</script>

<style scoped>
/* 确保布局容器能撑满整个屏幕 */
:global(html, body) {
  margin: 0;
  height: 100%;
}

/* 1. 布局容器: 垂直排列，占满视口高度 */
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 2. 头部: 高度固定，不收缩 */
.header-wrap {
  flex-shrink: 0;
}
.footer-wrap {
  flex: 0 0 auto; /* 不被挤压 */
  /* 可以设置具体高度，例如：
     height: 64px;
     line-height: 64px;
  */
  box-sizing: border-box;
}
/* 3. 主要内容区: 占据所有剩余空间，并允许自身垂直滚动 */
.layout-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px; /* 为大多数页面提供一个默认的内边距 */
}

/* 4. 全屏模式: 覆盖默认内边距，实现无边距效果 */
.layout-main-full {
  padding: 0;
}
</style>